// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@use "sass:list";
@use "sass:map";
@import "../../common/variables";
@import "../../common/variables-extended";

// Variables
// ---------------------------------------------------------------------------------------------------------------------

$tag-default-color: $gray1 !default;

$tag-height: $pt-spacing * 5 !default;
$tag-line-height: $pt-icon-size-standard !default;
$tag-padding-top: ($tag-height - $tag-line-height) * 0.5 !default;
$tag-padding: $tag-padding-top * 3 !default;
$tag-margin: ($pt-input-height - $tag-height) * 0.5 !default;

$tag-height-large: $pt-spacing * 7.5 !default;
$tag-line-height-large: $pt-spacing * 4.5 !default;
$tag-padding-large: $pt-spacing * 2 !default;

$tag-icon-spacing: $pt-spacing !default;
$tag-icon-spacing-large: $pt-spacing * 2 !default;

$tag-round-adjustment: $pt-spacing * 0.5 !default;

$tag-intent-colors: (
  "primary": (
    $pt-intent-primary,
    $blue2,
    $blue1,
    $white,
  ),
  "success": (
    $pt-intent-success,
    $green2,
    $green1,
    $white,
  ),
  "warning": (
    $orange5,
    $orange4,
    $orange3,
    $pt-text-color,
  ),
  "danger": (
    $pt-intent-danger,
    $red2,
    $red1,
    $white,
  ),
) !default;

$minimal-tag-intent-colors: (
  "primary": (
    $pt-intent-primary,
    $blue2,
    $blue1,
  ),
  "success": (
    $pt-intent-success,
    $green2,
    $green1,
  ),
  "warning": (
    $pt-intent-warning,
    $orange2,
    $orange1,
  ),
  "danger": (
    $pt-intent-danger,
    $red2,
    $red1,
  ),
) !default;

$minimal-dark-tag-intent-colors: (
  "primary": (
    $pt-intent-primary,
    $blue5,
    $blue6,
  ),
  "success": (
    $pt-intent-success,
    $green5,
    $green6,
  ),
  "warning": (
    $pt-intent-warning,
    $orange5,
    $orange6,
  ),
  "danger": (
    $pt-intent-danger,
    $red5,
    $red6,
  ),
) !default;

// Mixins - Tag component
// ---------------------------------------------------------------------------------------------------------------------

@mixin pt-tag() {
  @include pt-flex-container(row, $tag-icon-spacing, inline);
  align-items: center;
  background-color: $tag-default-color;
  border: none;
  border-radius: $pt-border-radius;
  box-shadow: none;
  color: $white;
  font-size: $pt-font-size-small;
  line-height: $tag-line-height;
  max-width: 100%;
  min-height: $tag-height;
  min-width: $tag-height;
  padding: $tag-padding-top $tag-padding;
  position: relative;

  &:focus {
    @include focus-outline(0);
  }

  &.#{$ns}-interactive {
    cursor: pointer;

    &:hover {
      background: $dark-gray5;
    }

    &:active,
    &.#{$ns}-active {
      background: $dark-gray4;
    }
  }

  &.#{$ns}-round {
    border-radius: $tag-height-large;
    padding-left: $tag-padding + $tag-round-adjustment;
    // optical adjustment for rounded tags
    padding-right: $tag-padding + $tag-round-adjustment;
  }

  > #{$icon-classes} {
    fill: $white;
  }

  @media (forced-colors: active) and (prefers-color-scheme: dark) {
    // Windows High Contrast dark theme
    border: 1px solid $pt-high-contrast-mode-border-color;
  }
}

@mixin pt-tag-large() {
  @include pt-flex-margin(row, $tag-icon-spacing-large);
  font-size: $pt-font-size;
  line-height: $tag-line-height-large;
  min-height: $tag-height-large;
  min-width: $tag-height-large;
  padding: ($tag-padding-large * 0.75) $tag-padding-large;

  &.#{$ns}-round {
    padding-left: $tag-padding-large + $tag-round-adjustment;
    // optical adjustment for rounded tags
    padding-right: $tag-padding-large + $tag-round-adjustment;
  }
}

@mixin pt-tag-intent($background-color, $hover-color, $active-color, $text-color) {
  background: $background-color;
  color: $text-color;

  &.#{$ns}-interactive {
    &:hover {
      background-color: $hover-color;
    }

    &:active,
    &.#{$ns}-active {
      background-color: $active-color;
    }
  }

  .#{$ns}-tag-remove {
    color: rgba($text-color, 0.7);

    &:hover,
    &:active {
      color: $text-color;
    }
  }
}

@mixin pt-tag-minimal() {
  > #{$icon-classes} {
    fill: $pt-icon-color;
  }

  &:not([class*="#{$ns}-intent-"]) {
    @include pt-tag-minimal-interactive($gray3, $black);

    background-color: rgba($gray3, 0.15);
    color: $pt-text-color;

    .#{$ns}-tag-remove {
      color: $gray1;

      &:hover,
      &:active {
        color: $dark-gray5;
      }
    }

    .#{$ns}-dark & {
      @include pt-tag-minimal-interactive($gray3, $white);

      background-color: rgba($gray3, 0.15);
      color: $pt-dark-text-color;

      .#{$ns}-tag-remove {
        color: $pt-dark-icon-color;

        &:hover,
        &:active {
          color: $light-gray1;
        }
      }
    }
  }
}

@mixin pt-tag-minimal-interactive($background-color, $text-color) {
  &.#{$ns}-interactive {
    cursor: pointer;

    &:hover {
      background-color: rgba($background-color, 0.3);
      color: $text-color;
    }

    &.#{$ns}-active,
    &:active {
      background-color: rgba($background-color, 0.35);
      color: $text-color;
    }
  }
}

@mixin pt-tag-minimal-intent($background-color, $text-color, $hover-active-text-color) {
  background-color: rgba($background-color, 0.1);
  color: $text-color;

  > #{$icon-classes} {
    fill: $text-color;
  }

  &.#{$ns}-interactive {
    &:hover {
      background-color: rgba($background-color, 0.2);
      color: $hover-active-text-color;
    }

    &:active,
    &.#{$ns}-active {
      background-color: rgba($background-color, 0.3);
      color: $hover-active-text-color;
    }
  }

  .#{$ns}-tag-remove {
    color: $text-color;

    &:hover,
    &:active {
      color: $hover-active-text-color;
    }
  }
}

@mixin pt-tag-minimal-dark-intent($background-color, $text-color, $hover-active-text-color) {
  background-color: rgba($background-color, 0.2);
  color: $text-color;

  &.#{$ns}-interactive {
    &:hover {
      background-color: rgba($background-color, 0.3);
      color: $hover-active-text-color;
    }

    &:active,
    &.#{$ns}-active {
      background-color: rgba($background-color, 0.35);
      color: $hover-active-text-color;
    }
  }

  .#{$ns}-tag-remove {
    color: $text-color;

    &:hover,
    &:active {
      color: $hover-active-text-color;
    }
  }
}

@mixin pt-tag-remove() {
  background: none;
  border: none;
  color: rgba($white, 0.7);
  cursor: pointer;
  display: flex;
  margin-bottom: -$tag-padding-top;
  /* stylelint-disable-next-line declaration-no-important */
  margin-right: -$tag-padding !important;
  // top/bottom to allow for padding to enlarge click area,
  // right to tuck remove button into padding space.
  margin-top: -$tag-padding-top;
  padding: $tag-padding-top;
  padding-left: 0;

  &:hover {
    background: none;
    color: inherit;
    text-decoration: none;
  }

  .#{$ns}-icon:first-child {
    color: inherit;
  }

  &:hover,
  &:active {
    color: $white;
  }

  // CSS API support
  &:empty::before {
    @include pt-icon;
    content: map.get($blueprint-icon-codepoints, "small-cross");
  }

  .#{$ns}-large & {
    /* stylelint-disable-next-line declaration-no-important */
    margin-right: -$tag-padding-large !important;
    padding: 0 ($tag-padding-large * 0.5) 0 0;

    &:empty::before {
      @include pt-icon-sized($pt-icon-size-large);
    }
  }
}

// Mixins - CompoundTag component
// ---------------------------------------------------------------------------------------------------------------------

@mixin compound-tag-colors(
  /* each list is a (default, hover, active) tuple of background colors */ $left-colors,
  $right-colors
) {
  // override default tag background styles: this is important for minimal tags with opacity values
  // which we want to define _absolutely_ in our design system and not by stacking opacities on top of each other.
  background: none;

  .#{$ns}-compound-tag-left {
    background-color: list.nth($left-colors, 1);
  }

  .#{$ns}-compound-tag-right {
    background-color: list.nth($right-colors, 1);
  }

  &.#{$ns}-interactive {
    &:hover {
      .#{$ns}-compound-tag-left {
        background-color: list.nth($left-colors, 2);
      }

      .#{$ns}-compound-tag-right {
        background-color: list.nth($right-colors, 2);
      }
    }

    &:active,
    &.#{$ns}-active {
      .#{$ns}-compound-tag-left {
        background-color: list.nth($left-colors, 3);
      }

      .#{$ns}-compound-tag-right {
        background-color: list.nth($right-colors, 3);
      }
    }
  }
}

@mixin minimal-compound-tag-colors($base-color) {
  $left-colors: (rgba($base-color, 0.2), rgba($base-color, 0.3), rgba($base-color, 0.4));
  $right-colors: (rgba($base-color, 0.1), rgba($base-color, 0.2), rgba($base-color, 0.3));

  @include compound-tag-colors($left-colors, $right-colors);
}

@mixin dark-minimal-compound-tag-colors($base-color) {
  $left-colors: (rgba($base-color, 0.4), rgba($base-color, 0.5), rgba($base-color, 0.55));
  $right-colors: (rgba($base-color, 0.2), rgba($base-color, 0.3), rgba($base-color, 0.35));

  @include compound-tag-colors($left-colors, $right-colors);
}
